<template>
  <div class="container">
    <div class="header">
      <div class="header-img">
        <i class="iconfont icon-jia"></i>
      </div>
      <div class="header-text">个人中心</div>
    </div>
    <div class="body">
      <div class="body-li">
        <div class="body-name">昵称：</div>
        <div class="login-input">
          <van-field v-model="name" type="text" placeholder="请输入昵称"/>
        </div>
      </div>
      <div class="body-li">
        <div class="body-name">用户名：</div>
        <div class="login-input">
          <van-field v-model="name" type="text" placeholder="请输入用户名"/>
        </div>
      </div>
      <div class="body-li">
        <div class="body-name">手机号：</div>
        <div class="login-input">
          <van-field v-model="name" type="text" placeholder="请输入11位手机号"/>
        </div>
      </div>
      <div class="login-out">
        <van-button block color="#1777FF" native-type="submit" @click="handleLoginOut">退出登录</van-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();

const name = ref("流云大模型");

const handleLoginOut = () => {
  router.push("/login")
}
</script>
<style lang="less" scoped>
.container{
  padding-top: 56px;
  .login-out{
    padding-top: 24px;
  }
  .body{
    
    padding: 36px 24px;
    .body-li{
      margin-bottom: 12px;
    }
    .body-name{
      font-size: 14px;
      margin-bottom:6px;
    }
    .login-input{
      height: 46px;
      padding:0 4px;
      width: 100%;
      border: 1px solid #B4B4B4;
      border-radius: 4px;
      display:flex;
      align-items:center;
      :deep(.van-field){
        height: 100%;
        
      }
    }
  }
  
  .header{
    display:flex;
    justify-content: center;
    flex-direction:column;
    align-items:center;
    .header-img{
      width: 100px;
      height:100px;
      background-image: url("@/assets/header.jpg");
      background-size: 100% 100%;
      border-radius: 100%;
      margin-bottom:24px;
      position: relative;
      .iconfont{
        font-size: 20px;
        color: #1777FF;
        position: absolute;
        right:0;
        bottom:0;
      }
    }
    .header-text{
      font-size: 16px;
      color: #000000;
    }
  }
  
}
</style>